<template>
  <div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      class="el-menu-vertical-demo"
      :default-active="useTabStore().currentPath"
      text-color="#fff"
      :unique-opened="Boolean('true')"
    >
      <MenuComponent
        v-for="menuItem in MenuList"
        :key="menuItem.name"
        :menuItem="menuItem"
      ></MenuComponent>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useTabStore } from "../store/modules/tabStore";
import MenuComponent from "./MenuComponent.vue";
import { dyRoutes } from "@/router";

export default defineComponent({
  name: "Menu",
  setup() {
    const router = useRouter();

    const createMenuItems = (routes: any) => {
      return routes.map((route: any) => {
        // 确保name属性为string类型
        const name = route.name && route.name.toString();
        return {
          path: route.path,
          name,
          meta: route.meta,
          children: route.children
            ? createMenuItems(route.children)
            : undefined,
          component: route.component,
        };
      });
    };

    // 将动态路由和base路由concat
    const arr = router.options.routes.concat(dyRoutes);
    // const MenuList = createMenuItems(router.options.routes);
    const MenuList = createMenuItems(arr);

    return {
      MenuList,
      MenuComponent,
      useTabStore,
    };
  },
});
</script>
